/*
 * 分类列表
 */
<script>
    export default {
        name: "ys-cates",
        props: {
            //数据列表
            list: {
                type: Array,
                default: () => []
            },
            //一行多少个2-5
            num : {
                type: String,
                default: "5"
            },
            //共几行，0为自动，限定行数，才会有侧滑
            row : {
                type: String,
                default: "0"
            }
        },
        computed: {

        },
        mounted() {
            this.cateInit();
            console.log("lineNum"+this.lineNum);
            console.log("rows:"+this.rows);
        },
        data() {
            return {
                cate : "cate",
                lineNum : Number(this.num),
                rows : Number(this.row),
                swiperNum : 1,
                swiperList : []
            };
        },
        methods: {
            /*
             * 分类初始化
             */
            cateInit() {
                if (this.num <2 || this.num >5) num = 5;
                this.cate = "cate line"+this.num;
                if (this.rows)
                    this.swiperNum = Math.ceil(this.list.length / this.lineNum * this.rows);
                console.log("swiperNum:"+this.swiperNum);
                if (this.swiperNum > 1) 
                    var k = 0;
                    for (var i=0; i<this.swiperNum; i++) {
                        for (var j=0; j<this.lineNum * this.rows; j++) {
                            if (j === 0) this.swiperList[i] = [];
                            if (this.list[k] == undefined) break;
                            this.swiperList[i][j] = this.list[k];
                            k++;
                        }
                    }
            }
        }
    }    
</script>

<template name="ys-cates">
    <view v-if="swiperNum === 1" class="ys-cates">
        <view class="cates">
            <view :class="cate" v-for="(item, index) in list" :key="index">
                <view class="icon" v-bind:style="{background: 'url(' + item.icon + ') no-repeat center', 'background-size': '90% 90%'}"></view>
                <text class="text">{{item.text}}</text>
            </view>
        </view>          
    </view>
    <swiper v-else class="ys-cates" duration="1000">
        <swiper-item class="cates" v-for="(n, index1) in swiperList" :key="index1">
            <view :class="cate" v-for="(item, index) in swiperList[index1]" :key="index">
                <view class="icon" v-bind:style="{background: 'url(' + item.icon + ')'}"></view>
                <text class="text">{{item.text}}</text>
            </view>           
        </swiper-item>
    </swiper>
</template>

<style lang="scss">
    .ys-cates {
        .cates {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            margin-top: 20upx;
            background-color: #ffffff;
            width: 100%;
            .cate {
                display: flex;
                flex-direction: column;
                margin: 40upx 0;
                align-items: center;
                .icon {
                    display: block;
                    width: 80upx;
                    height: 80upx;
                }
                .text {
                    margin-top:15upx;
                }
            }
            .line2 {
                width: 50%;
            }
            .line3 {
                width: 33.3%;
            }
            .line4 {
                width: 25%;
            }
            .line5 {
                width: 20%;
            }
        }
    }
</style>